<style scoped>
.contact {
    width:100%;
    height:calc(100vh);
    position: relative;
    background-color: #FFF;
}

.title{
    background-color:#468AE5;
    box-sizing: border-box;
    padding:30px;
    height: 125px;
}

.info {
    float: left;
    color:#FFF;
    font-family: "poppin";
    width:65%;
    overflow:hidden;
}

.info .name{
    font-size:20px;
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info .author{
    font-size:16px;
}

.play,.pause{
    width:60px;
    height:60px;
    float:right;
    border:1px solid #FFF;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
}

.play{
    background-image: url(/static/play_fill.svg);
}

.pause{
    background-image: url(/static/pause.svg);
}

.list{
    height:calc(100vh - 185px);
    position: relative;
}

.list canvas{
    position: absolute;
    bottom:0px;
}

.control{
    height: 60px;
    line-height: 60px;
    background-color: #353c46;
}

.control .time {
    color:#777C82;
    text-align:center;
    float: left;
    width:100px;
}

.control .progress-box{
    position: relative;
    width:calc(100vw - 200px);
    height:60px;
    float:left;
}

.control .progress-line{
    position: absolute;
    width:100%;
    height: 2px;
    background-color: #777C82;
    top:50%;
    left:0px;
    z-index:1;
}

.control .progress-bar{
    position: absolute;
    height: 2px;
    background-color: #99C8FF;
    top:50%;
    left:0px;
    z-index:2;
}

.control .progress-btn{
    position: absolute;
    border-radius: 100%;
    width:20px;
    height: 20px;
    margin-top:-10px;
    margin-left:-10px;
    background-color: #99C8FF;
    top:50%;
    z-index:2;
}

</style>
<template>
    <div class="contact">
        <div class="title">
            <div class="info">
                <p class="name">{{songName}}</p>
                <p class="author">{{artistName}}</p>
            </div>
            <div class="play" v-show="paused" @click="play">
                
            </div>
            <div class="pause" v-show="!paused" @click="pause">

            </div>
            <div class="cb"></div>
        </div>
        <div class="list">
            <lrc style="width:100%; height:100%;"></lrc>
        </div>
        <div class="control">
            <div class="time">{{currentTimeShow}}</div>
            <div class="progress-box" id="psbox" @touchstart="changeProcess">
                <div class="progress-line">
                </div>
                <div class="progress-bar" :style="{'width':(currentTime/duration*100)+'%'}">
                </div>
                <div class="progress-btn" :style="{'left':(currentTime/duration*100)+'%'}">
                </div>
            </div>
            <div class="time">{{durationShow}}</div>
            <div class="cb"></div>
        </div>
    </div>
</template>
<script>

import {mapState} from 'Vuex'
import lrc from './lrc.vue'
export default {
  name: 'player',
  data () {
    return {
    }
  },
  components: {
    lrc
  },
  computed: mapState({
    id: state => state.core.id,
    songName: state => state.core.songName,
    artistName: state => state.core.artistName,
    songLink: state => state.core.songLink,
    paused: state => state.core.paused,
    currentTime: state => state.core.currentTime,
    duration: state => state.core.duration,
    currentTimeShow () {
      return (Math.floor(this.currentTime / 60)) + ':' + '00'.substr(parseInt(this.currentTime % 60).toString().length) + parseInt(this.currentTime % 60)
    },
    durationShow () {
      return (Math.floor(this.duration / 60)) + ':' + '00'.substr(parseInt(this.duration % 60).toString().length) + parseInt(this.duration % 60)
    }
  }),
  watch: {
    '$route' (to, from) {
      this.$store.dispatch('getInfo', this.$route.params.id)
    },
    id (val) {
      window.player.src = 'http://www.glili.cn/api/music.php?id=' + this.id
      window.player.play()
      setInterval(() => {
        this.$store.commit('flushInfo')
      }, 100)
    }
  },
  mounted () {
    this.$store.dispatch('getInfo', this.$route.params.id)
  },
  methods: {
    play () {
      window.player.play()
    },
    pause () {
      window.player.pause()
    },
    changeProcess () {
      window.player.currentTime = parseInt((event.touches[0].pageX - document.getElementById('psbox').offsetLeft) / document.getElementById('psbox').offsetWidth * window.player.duration)
    }
  }
}
</script>
